import React from "react";
import { Table, Button, Modal, message } from "antd";
import { useTranslation } from "react-i18next";
import { text_check, avm_type_list, post_axios } from "../../utils/index";
import TypeIconTemp from "../../modules/typeIconTemp";
import OnlineIconTemp from "../../modules/onlineIconTemp";
import { WarningOutlined } from "@ant-design/icons";

export default function PointBindMachine(props) {
  const {
    tableList,
    tableHeight,
    local_company_object,
    get_point_bind_avm,
    session_company,
    unbind_bool,
    clicked_point_id,
    unbind_text,
  } = props;
  const { t } = useTranslation();
  const { confirm } = Modal;

  const company_bool = Boolean(session_company === "mg");
  const columns = [
    {
      dataIndex: "idx",
      align: "center",
      width: 40,
      render: (_, record, index) => <>{index + 1}</>,
    },
    {
      title: t("market.avm"),
      dataIndex: "avm",
      align: "center",
    },
    {
      title: t("market.avmID"),
      dataIndex: "avmID",
      align: "center",
    },

    {
      title: t("market.avmType"),
      align: "center",
      hidden: company_bool,
      render: (_, record) => <>{text_check(avm_type_list[record.avmType])}</>,
    },

    {
      title: t("common.status"),
      align: "center",
      render: (_, record) => (
        <>
          {record.status === "0" ? (
            <span>{t("common.enable")}</span>
          ) : (
            <span style={{ color: "red" }}>{t("common.disable")}</span>
          )}
        </>
      ),
    },

    {
      title: t("market.avm_box_type"),
      align: "center",
      render: (_, record) => (
        <>
          <TypeIconTemp avm_msg={record} />
        </>
      ),
    },

    {
      title: t("market.network"),
      align: "center",
      render: (_, record) => (
        <>
          <OnlineIconTemp
            avm_msg={record}
            local_company_object={local_company_object}
          />
        </>
      ),
    },
    {
      title: t("market.online_time"),
      dataIndex: "onlineChangeTime",
      align: "center",
    },

    {
      title: t("market.operation"),
      align: "center",
      hidden: unbind_bool,
      render: (_, record) => (
        <>
          <Button onClick={() => unbind_avm_func(record)}>{unbind_text}</Button>
        </>
      ),
    },
  ];

  // 解除绑定
  const unbind_avm_func = (val) => {
    let { avm } = val;
    confirm({
      title: t("common.info"),
      icon: <WarningOutlined />,
      content: (
        <div>
          {t("market.sure_unbind_avm")}
          <strong>{avm}</strong>
          {t("market.sure_unbind_avm2")}
        </div>
      ),
      onOk: async () => {
        let upMsg = {
          point_id: clicked_point_id,
          avm,
          company_id: local_company_object.id,
          company: local_company_object.company,
        };
        let res = await post_axios("point_manager", "m_unbind_avm", upMsg);
        if (!res) return;
        message.success({
          content: t("common.success"),
        });
        get_point_bind_avm();
      },
      onCancel() {},
    });
  };
  return (
    <>
      <Table
        dataSource={tableList}
        size="small"
        bordered
        columns={columns}
        rowKey="avm"
        virtual
        scroll={{
          y: tableHeight,
        }}
        pagination={false}
      />
    </>
  );
}
